<template>
  <var-bottom-navigation v-model:active="active">
    <var-bottom-navigation-item label="标签" icon="home" />
    <var-bottom-navigation-item label="标签" icon="magnify" />
    <var-bottom-navigation-item label="标签" icon="heart" />
    <var-bottom-navigation-item label="标签" icon="account-circle" />
  </var-bottom-navigation>
</template>
<script setup name="MsgListComponent">
import { ref } from 'vue'

const active = ref(0)
</script>

<style lang="scss" scoped>
.MsgList-component {
    .avatar {
        width: 50px;
        height: 50px;
    }

    .nickname {
        width: 260px;
        font-weight: 600;
        font-size: 15px;
    }

    .msg-preview {
        font-weight: 400;
        width: 260px;
    }
}
</style>